<template>
  <!-- 系统消息 -->
  <div v-loading="loading">
    <div v-show="isList" class="gl_mt_15">
      <div class="gl_my_15">
        <el-input v-model="Api_GET_MessageGetReceiveMessagesByContentQO.content" style="width:20%" suffix-icon="el-icon-search" placeholder="搜索" clearable size="mini" @change="getMessageList()" />
      </div>
      <div v-if="messageList.length > 0">
        <el-table size="mini" class="notice_table" :show-header="false" :data="messageList">
          <el-table-column type="index" width="50" />
          <el-table-column prop="content" label="标题">
            <template slot-scope="{row}">
              <span v-html="row.content" />
            </template>
          </el-table-column>
          <el-table-column label="时间" width="180">
            <template slot-scope="{row}">
              <span>{{ row.createTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="详情" width="100">
            <template slot-scope="{row}">
              <el-button type="text" @click="detail(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else class="gl_noData">
        <p>暂无数据</p>
      </div>
      <el-row v-if="messageList.length > Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount" class="gl_pt_20" style="text-align: center;">
        <el-pagination
          :current-page="Api_GET_MessageGetReceiveMessagesByContentQO.Page"
          :page-size="Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount"
          :total="totalPage"
          layout="total,sizes,prev,pager,next,jumper"
          :page-sizes="[10, 20, 30, 40]"
          @size-change="sizeChange"
          @current-change="pageIndexChange"
        />
      </el-row>
    </div>
    <Detail v-show="!isList" :detail-data="detailData" />
  </div>
</template>
<script>
import { api_GET_MessageGetReceiveMessagesByContent } from '@/extend/api/swaggerApi/chat.js';
import { Api_GET_MessageGetReceiveMessagesByContentQO } from '@/lib/form/swaggerForm';
import Detail from './detail';

export default {
  name: 'System',
  components: {
    Detail
  },
  data() {
    return {
      Api_GET_MessageGetReceiveMessagesByContentQO: new Api_GET_MessageGetReceiveMessagesByContentQO(),
      isList: true,
      loading: false,
      totalPage: 0,
      detailData: {}, // 消息详情
      messageList: [] // 消息列表
    };
  },
  created() {
    this.getMessageList();
  },
  methods: {
    // 获取消息列表
    getMessageList(page) {
      this.loading = true;
      this.Api_GET_MessageGetReceiveMessagesByContentQO.Page = page || 1;
      this.Api_GET_MessageGetReceiveMessagesByContentQO.SkipCount = (this.Api_GET_MessageGetReceiveMessagesByContentQO.Page - 1) * this.Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount;
      api_GET_MessageGetReceiveMessagesByContent(this.Api_GET_MessageGetReceiveMessagesByContentQO).then(res => {
        this.messageList = res.items;
        this.totalPage = res.totalCount;
        this.loading = false;
      }).catch(res => {
        this.loading = false;
      });
    },
    detail(row) {
      this.detailData = row;
      this.isList = false;
    },
    // 分页
    sizeChange(MaxResultCount) {
      this.Api_GET_MessageGetReceiveMessagesByContentQO.MaxResultCount = MaxResultCount;
      this.getMessageList();
    },
    pageIndexChange(currentPage) {
      this.getMessageList(currentPage);
    }
  }
};
</script>
<style scoped>
.el-table {
  border: none;
}
.el-table::before {
  background-color: #ffffff;
}
.el-table /deep/ th{
  border-right: none;
  background: #ffffff;
}
.el-table /deep/ thead th{
  background: #ffffff;
}
.el-table /deep/ td {
  border-right: none;
  font-size: 14px;
}
.el-table /deep/ .cell {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.notice_table {
  border-top: 1px solid #dfe6ec;
  border-right: none !important;
}
</style>

